/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

// Based on SpinKit
// http://tobiasahlin.com/spinkit/

@include export("loader") {
    $titon-loader-modifiers: map-get($titon-loader, "modifiers");
    $titon-loader-bubble-size: map-get($titon-loader, "bubble-size");
    $titon-loader-spinner-delay: map-get($titon-loader, "spinner-delay");

    #{generate-class-name($titon-loader)} {
        @extend %placeholder-inline-block;
        margin: 0 auto;
        text-align: center;

        > span {
            display: inline-block;
            margin: 0 2px;
            background: #fff;
        }
    }

    #{generate-class-name($titon-loader, "message")} {
        margin-top: 1rem;
    }

    //-------------------- Bar Wave --------------------//

    @if (is-feature-enabled("all-modifiers") or index($titon-loader-modifiers, "bar-wave")) {
        @keyframes bar-wave {
            0%, 50%, 100% {
                transform: scaleY(1);
            }
            25% {
                transform: scaleY(2);
            }
        }

        #{generate-class-name($titon-loader, "", "bar-wave")} {
            > span {
                height: map-get($titon-loader, "bar-height");
                width: map-get($titon-loader, "bar-width");
                animation: bar-wave 1.2s infinite ease-in-out;

                @for $i from 2 through map-get($titon-loader, "wave-count") {
                    &:nth-child(#{$i}) {
                        animation-delay: -#{(1.3 - ($i * 0.1))}s;
                    }
                }
            }
        }
    }

    //-------------------- Bubble Wave --------------------//

    @if (is-feature-enabled("all-modifiers") or index($titon-loader-modifiers, "bubble-wave")) {
        @keyframes bubble-wave {
            0%, 50%, 100% {
                transform: scale(.1);
            }
            25% {
                transform: scale(1);
            }
        }

        #{generate-class-name($titon-loader, "", "bubble-wave")} {
            > span {
                width: $titon-loader-bubble-size;
                height: $titon-loader-bubble-size;
                border-radius: 100%;
                animation: bubble-wave 1.5s infinite ease-in-out;
                animation-fill-mode: both;

                @for $i from 2 through map-get($titon-loader, "wave-count") {
                    &:nth-child(#{$i}) {
                        animation-delay: -#{(1.6 - ($i * 0.1))}s;
                    }
                }
            }
        }
    }

    //-------------------- Bubble Spinner --------------------//

    @if (is-feature-enabled("all-modifiers") or index($titon-loader-modifiers, "bubble-spinner")) {
        $titon-loader-spinner-double: $titon-loader-bubble-size * 2;
        $titon-loader-spinner-half: $titon-loader-bubble-size / 2;
        
        @keyframes bubble-spinner {
            0%, 100% {
                transform: scale(.1);
            }
            25% {
                transform: scale(1);
            }
        }

        #{generate-class-name($titon-loader, "", "bubble-spinner")} {
            #{generate-class-name($titon-loader, "spinner")} {
                width: $titon-loader-bubble-size * 5;
                height: $titon-loader-bubble-size * 5;
                position: relative;
                margin: 0 auto;

                > span {
                    background: #fff;
                    width: $titon-loader-bubble-size;
                    height: $titon-loader-bubble-size;
                    position: absolute;
                    border-radius: 100%;
                    animation: bubble-spinner #{$titon-loader-spinner-delay * 8}s infinite ease-in-out;
                    animation-fill-mode: both;

                    &:nth-child(1) {
                        top: 0;
                        left: $titon-loader-spinner-double;
                        animation-delay: -#{$titon-loader-spinner-delay * 7}s;
                    }

                    &:nth-child(2) {
                        top: $titon-loader-spinner-half;
                        right: $titon-loader-spinner-half;
                        animation-delay: -#{$titon-loader-spinner-delay * 6}s;
                    }

                    &:nth-child(3) {
                        top: $titon-loader-spinner-double;
                        right: 0;
                        animation-delay: -#{$titon-loader-spinner-delay * 5}s;
                    }

                    &:nth-child(4) {
                        bottom: $titon-loader-spinner-half;
                        right: $titon-loader-spinner-half;
                        animation-delay: -#{$titon-loader-spinner-delay * 4}s;
                    }

                    &:nth-child(5) {
                        bottom: 0;
                        left: $titon-loader-spinner-double;
                        animation-delay: -#{$titon-loader-spinner-delay * 3}s;
                    }

                    &:nth-child(6) {
                        bottom: $titon-loader-spinner-half;
                        left: $titon-loader-spinner-half;
                        animation-delay: -#{$titon-loader-spinner-delay * 2}s;
                    }

                    &:nth-child(7) {
                        top: $titon-loader-spinner-double;
                        left: 0;
                        animation-delay: -#{$titon-loader-spinner-delay * 1}s;
                    }

                    &:nth-child(8) {
                        top: $titon-loader-spinner-half;
                        left: $titon-loader-spinner-half;
                        animation-delay: -#{$titon-loader-spinner-delay * 0}s;
                    }
                }
            }
        }
    }
}
